<template>
  <div class="weather">
    <h1>气象数据记录</h1>
    <table>
      <thead>
        <tr>
          <th>气象ID</th>
          <th>数据采集时间</th>
          <th>温度 (°C)</th>
          <th>空气湿度 (%)</th>
          <th>降水量 (mm)</th>
          <th>风速 (m/s)</th>
          <th>风向</th>
          <th>气压 (hPa)</th>
          <th>太阳辐射 (W/m²)</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in weatherData" :key="item.weatherId">
          <td>{{ item.weather_id }}</td>
          <td>{{ item.timestamp }}</td>
          <td>{{ item.temperature }}</td>
          <td>{{ item.humidity }}</td>
          <td>{{ item.rainfall }}</td>
          <td>{{ item.wind_speed }}</td>
          <td>{{ item.wind_direction }}</td>
          <td>{{ item.pressure }}</td>
          <td>{{ item.solar_radiation }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { getWeatherData } from '@/api/farmland';

export default {
  name: 'Weather',
  data() {
    return {
      weatherData: [
        // {
        //   weatherId: 1,
        //   timestamp: '2025-3-20T12:00:00Z',
        //   temperature: 22.5,
        //   humidity: 65,
        //   rainfall: 10.0,
        //   wind_speed: 3.2,
        //   wind_direction: '东北',
        //   pressure: 1013,
        //   solar_radiation: 500
        // }
      ]
    };
  },
  methods: {
  async fetchWeatherData() {
    try {
      // console.log('获取气象数据')
      const response = await getWeatherData()
      console.log(response.data[0])
      this.weatherData = response.data[0]
    } catch (error) {
      console.error('获取气象数据失败', error)
    }
  }
},
mounted() {
  this.fetchWeatherData()
}
};
</script>

<style scoped>
.weather {
  font-family: Arial, sans-serif;
  margin: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #f1f1f1;
}
</style>